<template>
  <div class="page-container">
    <div class="page-header">
      <button class="back-button" @click="goToHome">
        <span class="icon-arrow-left"></span>
        返回首页
      </button>
      <h1>数据备份与恢复</h1>
      <p>管理系统数据的备份和恢复操作，确保数据安全</p>
    </div>
    
    <div class="backup-card">
      <div class="action-buttons">
        <button class="btn-primary" @click="createBackup">
          <span class="icon-download"></span> 创建新备份
        </button>
        <button class="btn-secondary" @click="importBackup">
          <span class="icon-upload"></span> 导入备份
        </button>
      </div>
      
      <div class="backup-settings">
        <h3>自动备份设置</h3>
        <div class="form-group">
          <label>开启自动备份</label>
          <div class="toggle-switch">
            <input type="checkbox" v-model="autoBackup.enabled" id="autoBackup">
            <label for="autoBackup" class="switch"></label>
          </div>
        </div>
        
        <div class="form-group" v-if="autoBackup.enabled">
          <label>备份频率</label>
          <select v-model="autoBackup.frequency">
            <option value="daily">每天</option>
            <option value="weekly">每周</option>
            <option value="monthly">每月</option>
          </select>
        </div>
        
        <div class="form-group" v-if="autoBackup.enabled">
          <label>保留备份数量</label>
          <input type="number" v-model="autoBackup.retention" min="1" max="30">
        </div>
        
        <button class="btn-save" @click="saveBackupSettings">保存设置</button>
      </div>
    </div>
    
    <div class="backup-history mt-20">
      <h2>备份历史记录</h2>
      <table class="backup-table">
        <thead>
          <tr>
            <th>备份名称</th>
            <th>备份时间</th>
            <th>文件大小</th>
            <th>备份类型</th>
            <th>状态</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="backup in backups" :key="backup.id">
            <td>{{ backup.name }}</td>
            <td>{{ backup.time }}</td>
            <td>{{ backup.size }}</td>
            <td>{{ backup.type }}</td>
            <td><span :class="['status-tag', backup.status]">{{ backup.statusText }}</span></td>
            <td class="action-buttons">
              <button class="btn-view" @click="downloadBackup(backup.id)">下载</button>
              <button class="btn-restore" @click="restoreBackup(backup.id)">恢复</button>
              <button class="btn-delete" @click="deleteBackup(backup.id)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DataBackup',
  data() {
    return {
      autoBackup: {
        enabled: true,
        frequency: 'daily',
        retention: 7
      },
      backups: [
        {
          id: 1,
          name: 'system_backup_20231015',
          time: '2023-10-15 02:00:00',
          size: '128 MB',
          type: '自动',
          status: 'success',
          statusText: '备份成功'
        },
        {
          id: 2,
          name: 'system_backup_20231014',
          time: '2023-10-14 02:00:00',
          size: '125 MB',
          type: '自动',
          status: 'success',
          statusText: '备份成功'
        },
        {
          id: 3,
          name: 'manual_backup_20231010',
          time: '2023-10-10 15:30:22',
          size: '120 MB',
          type: '手动',
          status: 'success',
          statusText: '备份成功'
        }
      ]
    }
  },
  methods: {
    goToHome() {
      this.$router.push('/home');
    },
    createBackup() {
      // 创建备份逻辑
      this.$message.info('正在创建新备份...');
      // 模拟备份成功
      setTimeout(() => {
        const newBackup = {
          id: this.backups.length + 1,
          name: `manual_backup_${new Date().getTime()}`,
          time: new Date().toLocaleString(),
          size: `${Math.floor(Math.random() * 50) + 100} MB`,
          type: '手动',
          status: 'success',
          statusText: '备份成功'
        };
        this.backups.unshift(newBackup);
        this.$message.success('备份创建成功');
      }, 1500);
    },
    importBackup() {
      // 导入备份逻辑
      this.$message.info('请选择备份文件导入');
    },
    saveBackupSettings() {
      // 保存备份设置逻辑
      this.$message.success('备份设置已保存');
    },
    downloadBackup(id) {
      // 下载备份逻辑
      const backup = this.backups.find(b => b.id === id);
      this.$message.success(`正在下载备份: ${backup.name}`);
    },
    restoreBackup(id) {
      // 恢复备份逻辑
      const backup = this.backups.find(b => b.id === id);
      if (confirm(`确定要从备份 ${backup.name} 恢复数据吗？此操作将覆盖现有数据！`)) {
        this.$message.success(`正在从备份 ${backup.name} 恢复数据...`);
      }
    },
    deleteBackup(id) {
      // 删除备份逻辑
      if (confirm('确定要删除此备份吗？')) {
        this.backups = this.backups.filter(b => b.id !== id);
        this.$message.success('备份已删除');
      }
    }
  }
}
</script>

<style scoped>
.page-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e1e5e8;
}

.back-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s;
  margin-right: 20px;
  font-weight: 500;
}

.back-button:hover {
  background: #2980b9;
  transform: translateY(-2px);
}

h1 {
  margin: 15px 0 10px;
  color: #2c3e50;
}

.page-header p {
  color: #7f8c8d;
  margin: 0;
}

.backup-card {
  background: white;
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.action-buttons {
  display: flex;
  gap: 15px;
  margin-bottom: 30px;
}

.btn-primary {
  background: #3498db;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-primary:hover {
  background: #2980b9;
}

.btn-secondary {
  background: #ecf0f1;
  color: #34495e;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-secondary:hover {
  background: #dcdde1;
}

.backup-settings {
  border-top: 1px solid #f1f1f1;
  padding-top: 20px;
}

h3 {
  margin-top: 0;
  color: #34495e;
  margin-bottom: 20px;
}

.form-group {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  gap: 15px;
}

.form-group label {
  width: 150px;
  font-weight: 500;
  color: #34495e;
}

.form-group input,
.form-group select {
  padding: 8px 12px;
  border: 1px solid #e1e5e8;
  border-radius: 5px;
  width: 200px;
}

.toggle-switch {
  display: flex;
  align-items: center;
}

.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 24px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #3498db;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

.btn-save {
  background: #3498db;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 10px;
}

.backup-history {
  background: white;
  padding: 25px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

h2 {
  margin-top: 0;
  color: #34495e;
  margin-bottom: 20px;
}

.backup-table {
  width: 100%;
  border-collapse: collapse;
}

.backup-table th,
.backup-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #f1f1f1;
}

.backup-table th {
  background-color: #f8f9fa;
  font-weight: 600;
  color: #2c3e50;
}

.status-tag {
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.status-tag.success {
  background-color: #eafaf1;
  color: #27ae60;
}

.status-tag.failed {
  background-color: #fdedeb;
  color: #e74c3c;
}

.status-tag.pending {
  background-color: #fef5e7;
  color: #f39c12;
}

.action-buttons {
  display: flex;
  gap: 8px;
}

.btn-view {
  background: #3498db;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
}

.btn-restore {
  background: #2ecc71;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
}

.btn-delete {
  background: #e74c3c;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
}

.mt-20 {
  margin-top: 20px;
}
</style>